/*
    需求：滚动条滚动实现页面加载

    知识点：
    clientHeight、clientWidth→元素宽高（height+padding，不包含边框），元素可视区域高度
    offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），元素的可视高度 自身的高度
    scrollHeight、scrollWidth→元素宽高 自身的高度+隐藏元素的高度

    offsetTop：被卷去的高
    offsetLeft：被卷去的左
    clientTop: 容器内部相对于容器本身的top偏移，实际就是border-width
    scrollTop: Y轴的滚动条没有，或滚到最上时是0；Y轴的滚动条滚到最下时是 scrollHeight-clientHeight。滚动时通常只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight，是正常的滚动距离，否则就是滚动过头了。
*/
export default {
  inserted: function (el, binding) {
    el.addEventListener("scroll", function () {
      const scrollDistance = el.scrollHeight - el.scrollTop - el.clientHeight;
      if (scrollDistance <= 10) {
        binding.value();
      }
    });
  },
};
